<template>
    <BlogHeader/>
    <div id="user-center">
        <h3>更新资料信息</h3>
        <form>
            <div class="form-elem">
                <span>性别：</span>
                <input v-model="editGender" type="text" placeholder="输入性别">
            </div>

            <div class="form-elem">
                <span>学号：</span>
                <input v-model="editStuID" type="text" placeholder="输入学号">
            </div>

            <div class="form-elem">
                <span>真实姓名：</span>
                <input v-model="editRealname" type="text" placeholder="输入真实姓名">
            </div>
            <div class="form-elem">
                <button v-on:click.prevent="changeInfo">更新</button>
            </div>
        </form>
    </div>
    <BlogFooter/>
</template>

<script>
    import axios from 'axios';
    import BlogHeader from '@/components/BlogHeader.vue';

    import authorization from '@/utils/authorization';

    export default {
        name: 'UserCenter',
        components: {BlogHeader},
        data: function () {
            return {
                editGender: '',
                editStuID: '',
                editRealname: '',
                editResponse: null,
            }
        },
        methods: {
            changeInfo() {
                const that = this;
                // 验证登录状态
                authorization()
                    .then(function (response) {
                        // 检查登录状态
                        // 若登录已过期则不执行后续操作
                        if (!response[0]) {
                            alert('登录已过期，请重新登录');
                            return
                        }
                        console.log('change info start');
                        // 密码不能小于 6 位
                        // 发送更新数据到接口
                        axios
                            .post('/edit', {
                                gender: this.editGender,
                                realname: this.editRealname,
                                stuID: this.editStuID,
                            })
                            .then(function (response) {
                                that.editResponse = response.data;
                                alert('资料更新成功！');
                            })
                            .catch(function (error) {
                                alert(error.message);
                            });
                    });
            }
        },
    }
</script>

<style scoped>
    #user-center {
        text-align: center;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: gray;
        color: whitesmoke;
        border-radius: 5px;
        width: 200px;
    }
</style>